<template>
  <div>
    <header style="background-color: rgba(154,108,182,0.5);backdrop-filter: blur(10px)" class="p-2 text-white">
      <div class="container">
        <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<!--          <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">-->
<!--            <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"></use></svg>-->
<!--          </a>-->

          <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
            <li><router-link to="/" class="nav-link px-2 c-text">Logo</router-link></li>
            <li><router-link to="/" class="nav-link px-2 c-text">LOOP_WORLD</router-link></li>
            <!--          <li><a href="#" class="nav-link px-2 text-white">Pricing</a></li>-->
            <!--          <li><a href="#" class="nav-link px-2 text-white">FAQs</a></li>-->
            <!--          <li><a href="#" class="nav-link px-2 text-white">About</a></li>-->
          </ul>

          <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search" >
            <input type="search" class="form-control search-box" placeholder="Search..." aria-label="Search" style="margin-right: 100px">
          </form>

          <div class="text-end" v-show="!loginUser.id">
            <button type="button" class="btn login-btn" @click="openLoginModal()">Login</button>
            <button type="button" class="btn reg-btn">SIGN UP</button>
          </div>
          <form v-show="loginUser.id" class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3 text-end">
            <img v-if="loginUser.avatar" :src='loginUser.avatar' class="avatar hover-pointer img-fluid"  @click="toUserInfo()">
            <span class="user-info-c hover-pointer" @click="toUserInfo()">个人主页</span>
            <span class="user-info-c hover-pointer"  @click="logOut()">注销</span>
            <button class="contribute-btn btn" @click="toContribute()" type="button"
            >

              <span class="contribute-span">投稿</span>
            </button>
          </form>
        </div>

      </div>



    </header>
    <Login ref="loginComponent"></Login>
  </div>

</template>

<script>
import Login from "@/components/Login";
export default {
  name: "Header",
  components: {Login},
  data() {
    return {
      loginModal: false,
      loginUser: {
        // avatar: "",
      }
    }
  },
  mounted() {
    this.loginUser = Tool.getLoginUser()
  },
  methods: {
    openLoginModal() {
      this.$refs.loginComponent.openLoginModal();
    },
    toContribute() {
      this.$router.push("/contribute")
    },
    toUserInfo() {
      if (this.loginUser.id) {
        this.$router.push("/userinfo")
      } else {
        swal("请登录")
      }
      
    },
    toHome() {
      this.$router.push('/')
    },
    logOut() {
      this.setLoginUser({})
      this.$router.push('/')
    },
    setLoginUser(loginUser) {
      Tool.setLoginUser(loginUser);
      this.loginUser = loginUser;
    }
  }
}
</script>

<style scoped>
.hover-pointer:hover {
  cursor: pointer;
}
.w-15 {
  width: 15%;
}
.w-35 {
  width: 35%;
}
.container-75 {
  width: 75%;
  margin: 0 auto;
}
.contribute-btn {

  width: 110.55px;
  /*height: 56.54px;*/
  transform: rotate(0.08deg);
  border-radius: 16.76px;
  background: #C86CFF;
  backdrop-filter: blur(70px);
}
.contribute-span {
  font-family: AlibabaPuHuiTiR,sans-serif;
  font-size: 20px;
  font-weight: normal;
  line-height: 34px;
  letter-spacing: 0em;
  color: #FFFFFF;
}
.user-info {
  width: 30%;
  display: flex;
}
.user-info-c {
  margin-right: 20px;
  line-height: 34px;

  font-family: AlibabaPuHuiTiR,sans-serif;
  font-size: 18px;
  font-weight: normal;
  line-height: 40px;
  letter-spacing: 0em;
  color: #FFFFFF;
}
.avatar {
  width:40px;
  height:40px;
  border-radius:50%;
  margin-right: 15px;
}
.c-text {
  /* logo */

  font-family: SourceHanSansCN-Regular;
  font-weight: normal;
  letter-spacing: 0em;
  color: #ffffff;
}
.login-btn {

  /* 矩形 39 */
  margin-right: 20px;
  width: 112.07px;
  height: 40.54px;
  transform: rotate(0.08deg);
  border-radius: 20px;
  background: #C86CFF;
  backdrop-filter: blur(70px);

  /* LOGIN */
  font-family: HarmonyOS_Sans_SC_Medium;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0em;
  color: #FFFFFF;
}
.reg-btn {

  /* 矩形 40 */
  width: 100.11px;
  height: 40.54px;
  transform: rotate(0.08deg);
  border-radius: 20px;
  background: #FFFFFF;
  backdrop-filter: blur(70px);

  /* SIGNUP */
  font-family: HarmonyOS_Sans_SC_Medium;
  font-size: 18px;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: 0em;
  color: #000000;
}
.search-box {

  /* 矩形 3 */
  /*width: 314.95px;*/
  height: 40.55px;
  transform: rotate(0.08deg);
  border-radius: 25.76px;
  box-sizing: border-box;
  border: 3px solid #9F00FF;
  backdrop-filter: blur(70px);
  padding: 5px;
  background-color: rgba(0,0,0,0);
  color: white;
}

</style>